<template>
    <div>
        <el-form v-if="displayType=='add'" :model="newDict" :rules="rules" class="infoInput" label-width="110px" ref="addForm">
            <el-form-item label="字典名称" prop="dictName">
                <el-input v-model="newDict.dictName" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="字典编码" prop="code">
                <el-input v-model="newDict.code" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="newDict.status">
                    <el-radio label="启用"></el-radio>
                    <el-radio label="停用"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" style="width:90%" v-model="newDict.remark"></el-input>
            </el-form-item>
            <div class="inlineBtn">
                <el-button type="primary" size="medium" @click="addSubmit">提交</el-button>
                <el-button size="medium"  @click="noUpdate">取消</el-button>
            </div>
        </el-form>
        <el-form v-if="displayType=='edit'" :model="dictInfo" :rules="rules" class="infoInput" label-width="110px" ref="editForm">
            <el-form-item label="字典名称" prop="dictName">
                <el-input v-model="dictInfo.dictName" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="字典编码" prop="code">
                <el-input v-model="dictInfo.code" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="dictInfo.status">
                <el-radio label="启用"></el-radio>
                <el-radio label="停用"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" style="width:90%" v-model="dictInfo.remark"></el-input>
            </el-form-item>
            <div class="inlineBtn">
                <el-button type="primary" size="medium" @click="updateSubmit">提交</el-button>
                <el-button size="medium"  @click="noUpdate">取消</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
  export default {
    data() {
        return {
            newDict: {
                status:'启用',
                listClass:'deafult',
                sort:1
            },
            //表单校验规则
            rules:{
                dictName: [
                    { required: true, message: '请输入字典名称', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入字典编码', trigger: 'blur' }
                ],
                remark:[
                    { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' },
                ],
            },
            dictInfo:JSON.parse(this.dict)
        }
    },
    props:['dict','displayType'],
    methods: {
        //新增提交
        addSubmit() {
            if(!this.checkForm('addForm')){
                return
            }
            console.log(this.newDict);
            let params=this.newDict;
            this.request('/api/dict/add',params).then(res=>{
              if(!res){return}
              this.$bus.$emit("addDictCallback")
            })
        },
        //修改提交
        updateSubmit(){
            if(!this.checkForm('editForm')){
                return
            }
            console.log(this.dictInfo);
            let params=this.dictInfo;
            this.request('/api/dict/update',params).then(res=>{
              if(!res){return}
              this.$bus.$emit("updateDictCallback")
            })
        },
        //表单提交前置校验
        checkForm(formName){
            let flag;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    flag=true;
                    return true;
                } else {
                    flag=false
                    return false;
                }
            });
            return flag
        },
        //取消修改
        noUpdate(){
            this.$bus.$emit("noUpdate")
        }
    },
    mounted(){
        
    }
  }
</script>

<style>
/*表单input框样式控制 */
.infoInput >div>div>div>input{
  width:90%;
}
/*修改页按钮 */
.inlineBtn {
    text-align:center
}
</style>